/*
 * @Description: Echarts图表模型js
 * @Author: Huang Junjie
 * @Date: 2021-06-03 12:11:45
 * @LastEditTime: 2021-06-24 17:00:05
 * @LastEditors: Huang Junjie
 */
// 引入echarts
const echarts = require('echarts');

// 月度跳闸统计 - 柱状图
export function ColumnChart01(myChart, yAxisData, data) {
  myChart.clear();
  myChart.setOption({
    grid: {
      top: 50,
      left: 0,
      right: 20,
      bottom: 25,
      containLabel: true
    },
    legend: {
      left: 150,
      bottom: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 35,
      textStyle: {
        color: '#ffffff'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'value',
      splitNumber: 10,
      min: 0,
      max: 180,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#ffffff'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      }
    },
    yAxis: {
      show: true,
      type: 'category',
      axisTick: {
        show: true,
        alignWithLabel: true,
        inside: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      },
      data: yAxisData
    },
    series: [
      {
        name: '上月',
        type: 'bar',
        barWidth: '10px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: '#2d6dd4' },
                { offset: 1, color: '#3980f3' }
              ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
            barBorderRadius: [20, 20, 20, 20]
          }
        },
        data: data[0]
      },
      {
        name: '本月',
        type: 'bar',
        barWidth: '10px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: '#087278' },
                { offset: 1, color: '#02c3bc' }
              ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
            barBorderRadius: [20, 20, 20, 20]
          }
        },
        data: data[1]
      }
    ]
  });

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }, 500);
}
